<template>
  <div class="audit-container">
    <div class="header-wrap">
      <!-- 导航栏 -->
      <hi-navbar
        fixed
        transparent="show"
        :backgroundColor="[237, 240, 243]"
        title="用户审核"
      >
      </hi-navbar>
    </div>
    <div>
      <div v-for="(item, index) of list" :key="index">
        <div class="audit-item" :class="item.status !== 0 ? 'has-aduit' : ''">
          <div class="u-flex u-row-between">
            <div>
              <div class="u-main-color u-m-b-12 name">
                {{ item.paper.subject }} - {{ item.paper.title }}
              </div>
              <div class="u-m-b-6">
                <text class="u-content-color">申请人: </text>
                <text class="u-tips-color">{{ item.username }}</text>
              </div>
              <div>
                <text class="u-content-color">申请时间: </text>
                <text class="u-tips-color"> 2020-02-02</text>
              </div>
            </div>
            <div v-if="item.status !== 0">
              <image
                :src="
                  item.status === 1
                    ? '/static/image/audit/pass.svg'
                    : '/static/image/audit/nopass.svg'
                "
                class="audit-image"
              ></image>
            </div>
          </div>
          <div class="action-wrap" v-if="item.status === 0">
            <div class="action-item close" @click="onClickAction(item, 2)">
              <u-icon name="close" size="36" color="#e74c3c"></u-icon>
            </div>
            <div class="action-item pass" @click="onClickAction(item, 1)">
              <u-icon name="checkmark" size="48"></u-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.getAuditList()
  },
  methods: {
    async getAuditList() {
      let UserAudit = new wx.BaaS.TableObject("user_audit")
      const res = await UserAudit.expand("paper")
        .orderBy(["status", "-created_at"])
        .find()
      this.list = res.data.objects
    },
    async onClickAction(item, status) {
      const res = await uni.showModal({
        title: "提示",
        content: `是否确认${status === 1 ? "通过" : "拒绝"}?`,
      })
      if (res[1].confirm) {
        let recordID = item.id // 数据行 id

        let UserAudit = new wx.BaaS.TableObject("user_audit")
        let userAudit = UserAudit.getWithoutData(recordID)

        userAudit.set("status", status)
        try {
          //#ifdef MP-WEIXIN
          await userAudit.update()
          wx.BaaS.invoke("audit_pass", {
            name: `${item.paper.subject} - ${item.paper.title}`,
            status: status,
            userId: item.created_by,
          })
          //#endif
          //#ifdef MP-QQ
          await userAudit.update()
          qq.BaaS.invoke("audit_pass__qq", {
            name: `${item.paper.subject} - ${item.paper.title}`,
            status: status,
            userId: item.created_by,
          })
          //#endif
          this.getAuditList()
        } catch (error) {
          uni.showToast({ title: "出错啦!请联系管理" })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.audit-item {
  border-bottom: 1rpx solid #bdc3c7;
  padding: 32rpx;
  .name {
    font-size: 36rpx;
  }
  .audit-image {
    width: 60px;
    height: 60px;
  }
  &.has-aduit {
    opacity: 0.75;
  }
}
.action-wrap {
  display: flex;

  margin-top: 32rpx;

  justify-content: flex-end;
  .action-item {
    display: flex;

    margin-left: 32rpx;
    border-radius: 50%;
    width: 100rpx;
    height: 100rpx;

    background: #ecf0f3;

    box-shadow: 7px 7px 14px #cccccf, -7px -7px 14px #fff;

    transition: background 0.2s ease-in-out;

    align-items: center;
    justify-content: center;
  }
}
</style>
